<template>
  <div id="content">
    <!-- 已点结构 -->
    <ul class="orderBox">
      <li v-for="(item,index) in orderResult" :key="item.table_num">
        <table>
          <tbody>
            <tr v-for="(i,d) in item.dishes" :key="i.dish_name">
              <td>{{d+1}}</td>
              <td><img :src="i.dish_img" alt=""></td>
              <td>{{i.dish_name}}</td>
              <td>
                <button @click="sub(index,d,item.table_num,i.dish_name,i.dish_count)"><span class="iconfont">&#xe605;</span></button>
                <span class="num">{{i.dish_count}}</span>
                <button @click="add(item.table_num,i.dish_name,i.dish_count)"><span class="iconfont">&#xe603;</span></button>
              </td>
              <td>￥{{i.unit_price}} x {{i.dish_count}}</td>
              <td>{{i.remarks}}</td>
              <td>
                <button class="select" @click="select(index,d,item.table_num,i.dish_name)">
                  <span class="iconfont" v-show="i.is_selected==='1'">&#xe641;</span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="foot">
          <div>
            <span>桌号：<strong>{{item.table_num}}</strong>号桌</span>
            <span>人数：{{item.people_num}}</span>
            <span>订单号：{{item.order_num}}</span>
            <button class="addDishes" @click="addDish(index,item.table_num)">添菜</button>
          </div>
          <div>
            <span>总计：￥<strong>{{item.totalPrice}}</strong></span>
            <button class="pay" @click="pay(item.table_num,item.people_num,index)">下单</button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getTime } from '@/utils/getTime.js'
// import bus from '../../eventBus.js'
import { getSeatInfoAPI } from '@/api/getSeatInfoAPI.js'
import { getOrderDetailAPI } from '@/api/getOrderDetailAPI.js'
import { setOrderDetailAPI } from '@/api/setOrderDetailAPI.js'
import { setSeatAPI } from '@/api/setSeatAPI.js'
import { removeOrderDetailAPI } from '@/api/removeOrderDetailAPI.js'
export default {
  // inject: ['reload'],
  data () {
    return {
      // 已点餐列表
      orderResult: [],
      reload: true,
      subCount: -1,
      addCount: 1,
      avltimer: null
    }
  },
  watch: {
    reload () {
      this.getOrderDetail()
    }
  },
  methods: {
    async getOrderDetail () {
      let orderResult = []
      const token = localStorage.getItem('token')
      const { data: res1 } = await getSeatInfoAPI(token)
      const orderingList = res1.data.filter(item => item.legend_class === 'ordering')
      const { data: res } = await getOrderDetailAPI(token)
      for (var i = 0; i < orderingList.length; i++) {
        orderResult.push({
          table_num: orderingList[i].seat_id,
          people_num: orderingList[i].people_num,
          order_num: orderingList[i].order_num,
          totalPrice: 0,
          dishes: res.data.filter(item => item.table_num === orderingList[i].seat_id)
        })
      }
      orderResult = orderResult.filter(item => item.dishes.length !== 0)
      for (var j = 0; j < orderResult.length; j++) {
        orderResult[j].dishes.filter(item => item.is_selected === '1').forEach(el => {
          orderResult[j].totalPrice += el.unit_price * el.dish_count
        })
      }
      this.orderResult = orderResult
    },
    async sub (idx, i, tablenum, dishname, dishcount) {
      if (this.orderResult[idx].dishes[i].dish_count + this.subCount < 1) return
      const token = localStorage.getItem('token')
      const data = {
        table_num: tablenum,
        dish_name: dishname,
        dish_count: dishcount + this.subCount
      }
      await setOrderDetailAPI(token, data)
      this.reload = !this.reload
    },
    async add (tablenum, dishname, dishcount) {
      const token = localStorage.getItem('token')
      const data = {
        table_num: tablenum,
        dish_name: dishname,
        dish_count: dishcount + this.addCount
      }
      await setOrderDetailAPI(token, data)
      this.reload = !this.reload
    },
    async addDish (idx, tablenum) {
      const token = localStorage.getItem('token')
      const data = { seat_id: tablenum, is_selected: 1 }
      await setSeatAPI(token, data)
      this.$router.push('/index/category')
    },
    async select (idx, i, tablenum, dishname) {
      const checked = Number(this.orderResult[idx].dishes[i].is_selected)
      const token = localStorage.getItem('token')
      const data = {
        table_num: tablenum,
        dish_name: dishname,
        is_selected: Number(!checked)
      }
      await setOrderDetailAPI(token, data)
      this.reload = !this.reload
    },
    async pay (seatid, peoplenum, idx) {
      const token = localStorage.getItem('token')
      const cancle = this.orderResult[idx].dishes.find(item => item.is_selected === '1')
      if (!cancle) {
        alert('您未选择任何菜品，将取消点餐')
        const data = {
          seat_id: seatid,
          people_num: 0,
          seat_legend: '',
          legend_class: '',
          is_selected: 0,
          order_num: ''
        }
        const { data: res } = await setSeatAPI(token, data)
        await removeOrderDetailAPI(token, seatid)
        console.log(res)
      } else {
        const data = {
          seat_id: seatid,
          people_num: peoplenum,
          seat_legend: '用餐中',
          legend_class: 'eating',
          is_selected: 0,
          order_time: getTime().orderTime
        }
        await setSeatAPI(token, data)
      }
      this.reload = !this.reload
    }
  },
  created () {
    this.getOrderDetail()
  }
}
</script>

<style scoped>
#content{
    position: fixed;
    top: 80px;
    right: 20px;
    bottom: 20px;
    left: 300px;
    background: rgba(255, 255, 255, .2);

    box-sizing: border-box;
    padding: 10px;

    overflow-y: auto;
}

.orderBox{
    width: 95%;
    margin: 0 auto;
    padding-top: 20px;
}
.orderBox li{
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
    margin-bottom: 40px;
    padding: 20px;
}
.orderBox img{
    width: 80px;
    height: 80px;
}
.orderBox table{
    width: 100%;
}
.orderBox tr{
    border-bottom: 1px solid rgba(255,255,255,.5);
}
.orderBox td{
    padding: 10px 0;
    text-align: center;
    color: #fff;
}
.orderBox td:nth-child(1){
    width: 5%;
}
.orderBox td:nth-child(6){
    width: 20%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.orderBox button{
    width: 30px;
    height: 30px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    vertical-align: middle;
}
.orderBox button span{
    font-size: 12px;
}
.orderBox button.select span{
    font-size: 20px;
}
.orderBox .num{
    width: 60px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    box-sizing: border-box;
    border-top: 1px solid rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(255,255,255,.5);
    font-size: 12px;
    vertical-align: middle;
}
.orderBox td:nth-child(4){
    font-size: 0;
}

.orderBox .foot{
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 0;
    color: #fff;
}
.orderBox .foot span{
    margin-right: 40px;
}
.orderBox .foot strong{
    color: #ffcb4e;
    font-size: 20px;
}
.orderBox .addDishes{
    width: 50px;
    height: 25px;
    background: #a65335;
    border-radius: 5px;
    border: none;
}
.orderBox .pay{
    width: 80px;
    height: 35px;
    background: #ff8400;
    font-style: 18px;
    border: none;
    border-radius: 5px;
}
</style>
